<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >意见管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/advise/reply' }">回复意见</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20" v-if="list">
            <el-col :span="12">
                <h6>意见详情</h6>
                <h4>标题-----{{list.title}}</h4>
                <p>楼主：{{list.username}}    时间：{{list.time | timeFormat}}</p>
                <p>内容：</p>
                <el-card shadow="always" class="adcontent"> 
                    <div v-html="list.content">

                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <h6>回复列表</h6>
                <div v-for="(item,i) in list.reply" :key="i">
                    <p>
                        <el-tag effect="plain" :type="item.roleid | colortype"> {{item.roleid | rolename}}</el-tag>  {{item.author}} / {{item.time | timeFormat}}
                    </p>
                    <p>
                        
                    </p>
                    <p>{{item.tips}}</p>
                </div>
                <p>-------------------</p>
                <el-form
                :model="form"
                :rules="rules"
                ref="myform"
                style="width:80%"
                label-position="top"
                class="myform"
                >
                    <el-form-item label="意见回复" prop="tips">
                        <el-input v-model="form.tips"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="addReply">点击回复</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getadvisebyid,updateadvisebyid,addreply} from "@/api"
export default {
    data(){
        return {
            list:null,
            form:{},
            rules:{
                tips:[
                    {required:true,message:"请输入回复内容",trigger:"blur"}
                ]
            }
        }
    },
    methods:{
        addReply(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    addreply({
                        username:sessionStorage.getItem("username"),
                        tips:this.form.tips,
                          _id:this.$route.params.id
                    })
                    .then(res=>{
                        if(res.type){
                            this.form = {}
                        }
                    })
                }else{
                    this.$message.error("请填写内容")
                    return false
                }
            })
        }
    },
    mounted(){
        getadvisebyid({
            _id:this.$route.params.id
        }).then(res=>{
            console.log(res)
            if(res.type){
                this.list = res.result
            }
        })
    }
}
</script>


<style lang="scss" scoped>
.adcontent{
    width:80%;
    height:260px;
    border:1px solid darkkhaki;
    border-radius:10px;
}
</style>